<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <!-- 为了制造假吸顶效果引入的假tabbar -->
    <tabbarcontrol
      :titles="['流行', '新款', '精选']"
      @tabClick="jianting"
      ref="tabbarcontrol2"
      class="tabbar-control"
      v-show="isShowHide"
      @click.native="tabbar2Click"
    >
    </tabbarcontrol>
    <!-- 这个probeType和pullUpLoad必须价格vbind 不然会当成字符串传过去 -->
    <scroll
      class="scrollcontent"
      ref="scroll"
      probeType="3"
      @scrollPosition="scrollPosition"
      :pull-up-load="true"
      @scrollPullingUp="scrollPullingUp"
    >
      <!-- betterscroll content只能包含一个同级div 不然无法滚动 -->
      <div>
        <homeswap :banners="banners" @HomeSwapImageLoad="HomeSwapImageLoad">
        </homeswap>
        <recommend :recommend="recommend"></recommend>
        <feature></feature>
        <!-- tabClick后面的监听方法不加括号，会把$emit发来的数据传到jianting的形参里面 -->
        <tabbarcontrol
          :titles="['流行', '新款', '精选']"
          @tabClick="jianting"
          ref="tabbarcontrol"
          @click.native="tabbar1Click"
        >
        </tabbarcontrol>

        <!-- 把对象数组给到子组件 -->
        <goods-list :goods="goods[currentType].list"></goods-list>
        <div class="bottom">接口是无限的数据，假装到底部了</div>
      </div>
    </scroll>
    <!-- 不是原生dom绑定事件监听要用.native -->
    <backtop @click.native="backTopClick()" v-show="isShowBackTop"></backtop>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import { getMultiHomeData, getHomeGoods } from "network/home";
import recommend from "./childComps/Recommend.vue";
import homeswap from "./childComps/HomeSwap.vue";
import feature from "./childComps/Frature";
import Tabbarcontrol from "../../components/content/tabControl/tabbarcontrol.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import Scroll from "components/common/scroll/Scroll.vue";
import Backtop from "../../components/content/backtop/Backtop.vue";
import { itemListenerMixin } from "../../common/mixin";

export default {
  name: "Home",
  components: {
    NavBar,
    homeswap,
    recommend,
    feature,
    Tabbarcontrol,
    GoodsList,
    Scroll,
    Backtop
  },
  data() {
    return {
      banners: [],
      recommend: [],
      goods: {
        // page当前页码，list里面方放真实的图片数据
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },

      currentType: "pop",
      // backTop按钮是否显示
      isShowBackTop: false,
      page: 1,
      // tabcontrol的offsettop属性
      taboffsettop: 0,
      // 当下滑到一定的位置之后，显示藏在背后的fixed的tabcontrol
      isShowHide: false,
      // 记录离开时候的y值
      saveY: 0
      /*       // 监听图片加载完成时候执行的函数  data里面可以保存函数哦
      itemImgListener:null */
    };
  },
  // mixins导入
  mixins: [itemListenerMixin],
  created() {
    document.title = "lin商城";
    // 生命周期函数一般只写函数声明 具体的逻辑写在method里面
    // this.调用的是methods里面的方法
    this.getMultiHomeData();

    // 请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  // 避免$ref.scoll拿不到值，放在mounted里面比create好
  mounted() {
    // mixin导入了
    /*      // 对监听的函数做个保存
    this.itemImgListener = () => {
      // console.log("home监听到图片加载成功了");
      // 每次监听到一张图片加载完成之后就刷新betterscroll 会影响性能
      this.$refs.scroll && this.$refs.scroll.refresh();
    }

    // 监听孙子组件 goodlistitem里面的图片加载完成
    this.$bus.$on("itemload", this.itemImgListener); */
    /*    获取tabbarcontrol的offsettop
    所有组件对象都有一个$el属性，可以拿到对应的dom元素
      tabbarcontro之上的图片还没加载完 所以算出来的值不准
    */
    // console.log(this.$refs.tabbarcontrol.$el.offsetTop);
  },
  // 组件活跃时调用 读取上次离开时候的y值
  activated() {
    console.log(this.saveY + "home 激活了");
    this.$refs.scroll.scrollTo(0, this.saveY, 10);
    // 刷新一下 免得出bug
    this.$refs.scroll.refresh();
  },
  // 组件不活跃时调用 记录y值
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
    console.log("离开时记录的savey是" + this.saveY);
    // console.log(this.saveY);

    // 取消事件总线监听  detail里面的商品加载完成后没有必要去刷新home组件
    this.$bus.$off("itemload", this.itemImgListener);
  },
  methods: {
    getMultiHomeData() {
      // 网络请求过来的数据，保存到data()里面，就不会因为函数的弹栈而被销毁
      getMultiHomeData().then(res => {
        //  res.data.banner是axios通过接口请求过来的数据
        this.banners = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },

    getHomeGoods(type) {
      // 这个是导入调用进来的方法
      getHomeGoods(type, this.page).then(res => {
        // ...可变参数语法，把res.data.list这个数组 整份拷贝给空数组
        this.goods[type].list.push(...res.data.list);
        // 请求完之后页数加1
        this.page += 1;
        this.goods[type].page = this.page;
      });
    },

    // 自定义事件监听 判断当前显示的栏目
    jianting(index) {
      // console.log(index);
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      // console.log(this.currentType);
    },
    //回到顶栏菜单的方法
    backTopClick() {
      // this.$refs.scroll拿到的是scroll.vue里面的vue对象 再调用里面的scrollto方法
      this.$refs.scroll.scrollTo(0, 0, 1500);
    },

    // 监听自定义事件，拿到当前滚动的位置 并判断是否显示回到顶部按钮
    scrollPosition(position) {
      this.isShowBackTop = position.y < -750;

      /* 判断tabcontrol是否吸顶(动态加上Position fixed属性)
        这个方法不好用
      */
      if (position.y < -this.taboffsettop + 40) {
        this.isShowHide = true;
      } else {
        this.isShowHide = false;
      }
    },

    // 监听自定义事件 滚动到最下方的时候 请求数据
    scrollPullingUp() {
      if (this.page <= 5) {
        this.getHomeGoods(this.currentType);
        this.$refs.scroll.finishPullingUp();
      } else {
        console.log("到底部了");
      }
    },

    // 轮播图组件图片加载完成后，可以开始计算offsettop了
    HomeSwapImageLoad() {
      //  拿到正确的offsettop了 这边只有轮播图影响比较大
      console.log("done" + this.$refs.tabbarcontrol.$el.offsetTop);
      this.taboffsettop = this.$refs.tabbarcontrol.$el.offsetTop;
    },

    // 以下方法用于同步两个真假tabbarcontrol的当前选项卡
    tabbar1Click() {
      this.$refs.tabbarcontrol2.currentIndex = this.$refs.tabbarcontrol.currentIndex;
    },
    tabbar2Click() {
      this.$refs.tabbarcontrol.currentIndex = this.$refs.tabbarcontrol2.currentIndex;
    }
  }
};
</script>

<style scoped>
/* #home {
  height: 100%;
  background-color: #fff;
} */
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
.scrollcontent {
  /* css设置动态高度 减去nacbar和tabbrbar 中间的高度  */
  height: calc(100vh - 97px);
  overflow: hidden;
}
.bottom {
  text-align: center;
  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: rgba(228, 83, 83, 0.6);
}
.tabbar-control {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 100;
}
</style>
